<template>
  <div class="main">
    <day-main>
      <template #ico>
        <img src="~assets/img/day/titi_ico2.png" alt="" class="ico" />
      </template>
      <template #text>一房一档</template>
      <template #infor>
        <div class="day_xx">
            <div class="xx_ico">
              <p class="fontcolor1"><span class="fontsize25">31598</span>间</p>
              <p>房屋总数量</p>
            </div>
            <div class="xx_ico">
              <p class="fontcolor2"><span class="fontsize25">10360</span>间</p>
              <p>空置房屋数量</p>
            </div>
            <div class="xx_ico">
              <p class="fontcolor3"><span class="fontsize25">65</span>间</p>
              <p>重点人员房屋数量</p>
            </div>
            <div class="xx_ico">
              <p class="fontcolor4"><span class="fontsize25">21238</span>间</p>
              <p>房屋入住总数量</p>
            </div>
          </div>
      </template>
      <template #selects>
        <div class="rig_sou">
          人员姓名:<input
            type="text"
            name=""
            id=""
            placeholder="请输入人员姓名"
          />
        </div>
        <div class="rig_sou">
          身份证号:<input
            type="text"
            name=""
            id=""
            placeholder="请输入身份证号"
          />
        </div>
        <div class="rig_sou">
          电话号码:<input
            type="text"
            name=""
            id=""
            placeholder="请输入电话号码"
          />
        </div>
        <div class="rig_sou">
          <button>查询</button>
        </div>
      </template>
      <template #records>
        <div class="ss_li" v-for="item in records">
          <div class="ss_main">
            <div class="ss_le">
              <img :src="item.img" alt="" />
            </div>
            <div class="ss_ri">
              <p>人员姓名:{{ item.name }}</p>
              <p>人员民族:{{ item.cation }}</p>
              <p>身份证号:{{ item.idCard }}</p>
              <p>户籍地址:{{ item.site }}</p>
              <p>登记时间:{{ item.date }}</p>
            </div>
          </div>
        </div>
      </template>
    </day-main>
  </div>
</template>

<script>
import DayMain from "components/content/dayMain/DayMain.vue";
export default {
  components: { DayMain },
  data() {
    return {
      records: [
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
      ],
    };
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.main {
  color: #fff;
}
.day_xx {
  font-family: shuzi;
  font-size: 1rem;
  .xx_ico {
    padding: 1.25rem 0 1.25rem 7.8125rem;

    p {
      margin: 0.3125rem 0;
    }
  }

  .xx_ico:nth-child(1) {
    background: url(~assets/img/day/xx_ico1.png) no-repeat;
    background-size: 6.25rem 5.625rem;
    background-position: left center;
  }

  .xx_ico:nth-child(2) {
    background: url(~assets/img/day/xx_ico2.png) no-repeat;
    background-size: 6.25rem 5.625rem;
    background-position: left center;
  }

  .xx_ico:nth-child(3) {
    background: url(~assets/img/day/xx_ico3.png) no-repeat;
    background-size: 6.25rem 5.625rem;
    background-position: left center;
  }

  .xx_ico:nth-child(4) {
    background: url(~assets/img/day/xx_ico4.png) no-repeat;
    background-size: 6.25rem 5.625rem;
    background-position: left center;
  }

  .xx_ico2:nth-child(1) {
    background: url(~assets/img/day/qy_ico1.png) no-repeat;
    background-size: 6.25rem 5.625rem;
    background-position: left center;
  }

  .xx_ico2:nth-child(2) {
    background: url(~assets/img/day/qy_ico2.png) no-repeat;
    background-size: 6.25rem 5.625rem;
    background-position: left center;
  }

  .fontcolor1 {
    background: -webkit-linear-gradient(bottom, #00e4ff, #00e4ff);
    -webkit-background-clip: text;
    color: transparent;
  }

  .fontcolor2 {
    background: -webkit-linear-gradient(bottom, #13e475, #21d2f6);
    -webkit-background-clip: text;
    color: transparent;
  }

  .fontcolor3 {
    background: -webkit-linear-gradient(bottom, #ff0000, #ff8888);
    -webkit-background-clip: text;
    color: transparent;
  }

  .fontcolor4 {
    background: -webkit-linear-gradient(bottom, #e4d813, #f69421);
    -webkit-background-clip: text;
    color: transparent;
  }

  .fontsize25 {
    font-size: 1.875rem;
    font-weight: bold;
  }
}

.qy_bot {
  margin-top: 1.875rem;
  width: 100%;

  .qy_tit {
    background: url(~assets/img/day/qy_tit.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding: 0.1875rem;
  }

  #qy_echart {
    width: 16.25rem;
    height: 21.25rem;
  }
}
.rig_sou {
  margin-right: 1.25rem;
  line-height: 2.5rem;

  input {
    width: 12.5rem;
    height: 1.875rem;
    border: 0.0625rem solid #2e9eff;
    background-color: #060d2f;
    color: white;
    padding-left: 0.9375rem;
    border-radius: 0.1875rem;
    font-size: 0.75rem;
  }

  select {
    width: 9.375rem;
    height: 1.875rem;
    font-size: 0.875rem;
    border: 0.0625rem solid #2e9eff;
    background-color: #060d2f;
    color: #ccc;
    padding-left: 0.9375rem;
    border-radius: 0.1875rem;
  }

  input::-webkit-input-placeholder {
    color: #c4c4c4;
  }

  input::-moz-input-placeholder {
    color: #c4c4c4;
  }

  input::-ms-input-placeholder {
    color: #c4c4c4;
  }
  button {
    background-color: #2e9eff;
    color: white;
    border-radius: 0.1875rem;
    border: none;
    height: 2.1875rem;
    padding: 0 1.25rem;
  }
}
.ss_li {
  background: url(~assets/img/day/li_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 1.25rem;
  box-sizing: border-box;
  margin: 0.3125rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  float: left;
  width: 21.5rem;

  .ss_li_tit {
    text-align: center;
    font-size: 0.875rem;
    width: 100%;
  }

  .ss_main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .ss_le {
      width: 6.0625rem;
      height: 5.4375rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .ss_ri {
      margin-left: 0.625rem;
      width: 70%;
      p {
        margin: 0;
        color: #02c6d6;
        font-size: 0.75rem;
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
      }
    }
  }
}

.ico {
  width: 100%;
}
</style>